<template>
  <view class="statusBar"></view>
  <view class="container">
    <view class="header">
      <image :src="useUserStore.userInfo.avatarURL" class="image"></image>
      <view class="info">
        <text style="margin-right: 10rpx">{{ useUserStore.userInfo.name }}</text>
        <text
          class="iconfont icon-nan"
          v-if="useUserStore.userInfo.sex === '男'"
          style="background-color: #184795; color: white; border-radius: 50%; font-size: 30rpx; padding: 5rpx"
        ></text>
        <text
          class="iconfont icon-nv"
          v-else
          style="background-color: #dd585a; color: white; border-radius: 50%; font-size: 30rpx; padding: 5rpx"
        ></text>
      </view>
      <view style="font-size: 24rpx; color: darkgray">
        {{ useUserStore.userInfo.department }} · {{ useUserStore.userInfo.grade }}
      </view>
    </view>
    <view class="content">
      <uni-list>
        <uni-list-item
          v-for="item in items"
          :key="item.id"
          :title="item.title"
          :clickable="true"
          link
          :extraIcon="item.icon"
          showExtraIcon="true"
          :to="item.src"
        ></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
  import { userStore } from '@/store/user.js'

  const useUserStore = userStore()

  const items = [
    {
      id: 1,
      title: '个人信息',
      src: '/pages/my/personalInfo/personalInfo',
      icon: {
        color: 'darkgray',
        size: '16',
        type: 'person'
      }
    },
    {
      id: 2,
      title: '修改密码',
      src: '/pages/my/changePassword/changePassword',
      icon: {
        color: 'darkgray',
        size: '16',
        type: 'locked'
      }
    },
    {
      id: 3,
      title: '通讯录',
      src: '/pages/my/contact/contact',
      icon: {
        color: 'darkgray',
        size: '16',
        type: 'list'
      }
    },
    {
      id: 4,
      title: '问题反馈',
      src: '/pages/help/help',
      icon: {
        color: 'darkgray',
        size: '16',
        type: 'chat'
      }
    },
		{
			id: 7,
			title: '我的工单',
			src: '/pages/onlineService/order/order',
			icon: {
        color: 'darkgray',
        size: '16',
        type: 'flag'
      }
		},
    {
      id: 5,
      title: '关于',
      src: '/pages/my/about/about',
      icon: {
        color: 'darkgray',
        size: '16',
        type: 'info'
      }
    },
    {
      id: 6,
      title: '设置',
      src: '/pages/my/settings/settings',
      icon: {
        color: 'darkgray',
        size: '16',
        type: 'gear'
      }
    }
  ]
</script>

<style lang="scss" scoped>
  .container {
    height: calc(100vh - var(--status-bar-height) - 100rpx);
    display: flex;
    flex-direction: column;
    align-items: center;

    .header {
      height: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 99;

      .info {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
      }

      .info::before {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        height: 40%;
        width: 100%;
        background: linear-gradient(to bottom, rgba(24, 71, 149, 0.6), transparent);
      }

      .image {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: 40rpx;
        border-radius: 50%;
        z-index: 1;
      }
    }

    .content {
      width: 90%;
    }
  }

  .statusBar {
    height: var(--status-bar-height);	
  }
</style>
